<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}增强服务|蓝鲸制品库{% endblock %}</title>

    <link href="{{ STATIC_URL }}css/bk-magic-vue.min.css" rel="stylesheet">
    <link href="{{ STATIC_URL }}css/index.css" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    {% block end_of_head %}

    {% endblock %}
</head>
<body class="bg-white" data-bg-color="bg-white">
<div id="app" class="paas-container bk-navigation-wrapper">
    <div class="paas-side-bar" id="paas-side-bar">
        <div class="nav-header" style="width: 220px; display: flex;">
            <div class="logo">
                <img src="{{ SVC_LOGO_URL }}">
            </div>
            <span class="title">
                增强服务 | 蓝鲸制品库
            </span>
        </div>
        <bk-navigation-menu
            ref="menu"
            @select="handleSelect"
            :default-active="active">
            <bk-navigation-menu-item
                v-for="item in navList"
                :key="item.name"
                :has-child="item.children && !!item.children.length"
                :group="item.group"
                :icon="item.icon"
                :disabled="item.disabled"
                :url="item.url"
                :id="item.name">
                <span>$[item.name]</span>
                <div slot="child">
                    <bk-navigation-menu-item
                        :key="child.name"
                        v-for="child in item.children"
                        :id="child.name"
                        :disabled="child.disabled"
                        :icon="child.icon"
                        :url="child.url"
                        :default-active="child.active">
                        <span>$[child.name]</span>
                    </bk-navigation-menu-item>
                </div>
            </bk-navigation-menu-item>
        </bk-navigation-menu>
    </div>
    <div class="navigation-container" style="overflow: hidden;">
        <div class="container-header" id="paas-header" style="flex-basis: 0px; justify-content: flex-start;margin:2px 0px 3px 0px;">
            <div class="monitor-navigation-header">
                <div class="header-breadcrumb">
                    {% block breadcrumb %}
                    <ul class="paas-breadcrumb">
                        <li><a>{{ app_info.app_code }}</a></li>
                        <li><a>{{ app_info.module }}</a></li>
                    </ul>
                    {% endblock %}
                </div>
            </div>
        </div>
        <div class="monitor-navigation-content">
            <main class="main-layout">
            {%  block main-layout %}
            {% endblock %}
            </main>
        </div>
    </div>
</div>
</body>

<script src="{{ STATIC_URL }}js/vue@2.6.14.js"></script>
<script src="{{ STATIC_URL }}js/bk-magic-vue.min.js"></script>
<script>
    var navList = [
        {
            name: "首页",
            icon: 'nav-item-icon bk-icon icon-home-shape',
            url:  "{% url 'instance.index' instance.uuid %}"
        },

    ]

    document.addEventListener('DOMContentLoaded', () => {
        new Vue({
            el: "#paas-side-bar",
            delimiters: ['$[', ']'],
            data: function () {
                return {
                    active: '{{ view.name }}',
                    navList: navList,
                }
            },
            methods: {
                handleSelect: function (name, obj) {
                    if (obj.url !== undefined && "{{ view.name }}" !== name) {
                        this.$bkLoading({title: '加载中'})
                        window.location.href = obj.url
                    }
                },
            },
        })
    })
</script>


{% block end_of_body %}

{% endblock %}
</html>
